<template>
  <a-layout-sider v-model:collapsed="globalStore.collapsed" :trigger="null" collapsible>
    <div class="logo" >
        {{ globalStore.collapsed ? '语言' :"语言学习后台管理系统" }}
    </div>
    <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" :items="adminMenuItems" @click="handleMenuClick" />
  </a-layout-sider>
</template>

<script setup>
import { ref, h } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { UserOutlined,CommentOutlined,TableOutlined,ProfileOutlined,StarOutlined,FileDoneOutlined,BarChartOutlined  } from '@ant-design/icons-vue';
import { useGlobalStore } from '@/stores/global'

const router = useRouter();
const route = useRoute();
const globalStore = useGlobalStore();
const selectedKeys = ref([route.path]);
const adminMenuItems = ref([
  {
    key: '/manager/statistics',
    icon: () => h(BarChartOutlined),
    label: '数据统计',
    title: '数据统计',
  },
  {
    key: '/manager/user',
    icon: () => h(UserOutlined),
    label: '用户管理',
    title: '用户管理',
  },
  {
    key: '/manager/tips',
    icon: () => h(FileDoneOutlined),
    label: '学习贴士管理',
    title: '学习贴士管理',
  },
  {
    key: '/manager/plate',
    icon: () => h(TableOutlined),
    label: '板块管理',
    title: '板块管理',
  },
  {
    key: '/manager/post',
    icon: () => h(ProfileOutlined),
    label: '帖子管理',
    title: '帖子管理',
  },
  // {
  //   key: '/manager/collect',
  //   icon: () => h(StarOutlined),
  //   label: '收藏管理',
  //   title: '收藏管理',
  // },
  {
    key: '/manager/comment',
    icon: () => h(CommentOutlined),
    label: '评论管理',
    title: '评论管理',
  },
]);
const handleMenuClick = ({ item }) => {
  const { key } = item.originItemValue;
  selectedKeys.value = [route.path];
  router.push(key);


};

</script>

<style lang="less" scoped>
.logo {
  height: 56px;
  color: #fff;
  font-size: 16px;
  line-height: 56px;
  box-sizing: border-box;
  padding-left: 8px;
  text-align: center;
}
</style>
